import React from 'react';
import { connect } from 'react-redux'
import 'styles/setting/workflow/new-workflow.scss'
import { messages } from "share/common"
import { Button, Icon, Input } from 'antd'
class NewWorkflowHeader extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      routerItem: [],
      isInput: false,
    };
  }

  componentDidMount() {
    this.setState({ routerItem: this.props.routerItem, name: this.props.name });
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ routerItem: nextProps.routerItem, name: nextProps.name });
  }

  //显示新版审批流
  handleChangeVisible = (visible) => {
    this.setState({ visible });
  };

  handleClick = (title) => {
    const { routerItem } = this.state;
    routerItem.forEach(
      routerItem => {
        routerItem.default = false;
        if (title.type === routerItem.type) {
          routerItem.default = true;
        }
      });
    this.setState(routerItem)
    this.props.onSelectTab(title)
  };

  handleSave = () => {
    this.props.onSave(this.state.name);
  };

  handleInput = () => {
    this.setState({ isInput: true })
  };

  saveFormName = e => {
    this.setState({ isInput: false, name: e.target.value })
  };

  inputChange = e => {
    this.props.onChangeName( e.target.value);
    this.setState({ name: e.target.value })
  };

  render() {
    const { routerItem, isInput, name } = this.state;
    const { version, readOnly, language } = this.props;
    return (
      <div className="workflow-header">
        {!readOnly &&
        <div className="form-name">
          <Icon onClick={this.props.onClose} type="left"/>
          {isInput ?
            <Input
              style={{ width: 200 }}
              onChange={this.inputChange}
              value={name}
              maxLength={language.code === 'zh_cn' ? 20 : 40 }
              onBlur={this.saveFormName}
            /> :
            <span onClick={() => this.handleInput()}>{name}
              <Icon type="edit"/>
            </span>}
          <span className="version">{ `${version ? 'V' + version : ''}`}</span>
        </div>}
        {readOnly &&
        <div className="form-name">
          <span>{messages('setting.key881')/*跳转至*/}</span>
          <Icon className="exclamation-circle" type="exclamation-circle"/>
          <span className="mess">{messages('setting.key884')/*只能对人工审批环节进行跳转*/}</span>
        </div>}
        <div className="header-content">
          {routerItem.map(item => {
            return (
              <div onClick={() => this.handleClick(item)}
                   className={`content-item ${item.default ? 'actived' : ''}`}>
                {item.name}
              </div>
            )
          })}
        </div>
        <div className="header-buttons">
          <Button
            className="save-btn" type="primary"
            onClick={() => this.handleSave()}>
            {readOnly ? messages('setting.key1100')/*确定*/ : messages('setting.key1079')/*保存*/}
          </Button>
          {readOnly && <Button style={{ marginLeft: 10 }} onClick={ this.props.onCancel}>{messages('setting.key1080')/*取消*/}</Button>}
        </div>
      </div>
    );
  }
}

NewWorkflowHeader.PropTypes = {
  example: React.PropTypes.object.isRequired,
  componentKey: React.PropTypes.string.isRequired,
  onClose: React.PropTypes.func,
  onSelectTab: React.PropTypes.func,
  routerItem: React.PropTypes.array,
  name: React.PropTypes.string.isRequired,
  onSave: React.PropTypes.func,
  onCancel: React.PropTypes.func,
  version: React.PropTypes.string,
  readOnly: React.PropTypes.boolean,
};

NewWorkflowHeader.defaultProps = {
  onClose: () => {},
  onSelectTab: () => {},
};

function mapStateToProps(state) {
  return {
    company: state.login.company,
    user: state.login.user,
    language: state.main.language,
    workflowDepartmentPosition: state.cache.workflowDepartmentPosition,
  }
}
export default connect(mapStateToProps)(NewWorkflowHeader);

